<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp" %>
<!DOCTYPE HTML>
<html ng-app>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <title>${title}</title>
    <%@ include file="/WEB-INF/jsp/commons/meta.jsp" %>
    <link href="${ctx}/resources/new/style.css" type="text/css" rel="stylesheet"/>

</head>
<body>
<script>
    $(document).ready(function () {
        //聚焦第一个输入框
        $("#account").focus();
        //为inputForm注册validate函数
        $("#inputForm").validate({
            rules: {
                account: {
                    required: true,
                    remote: {
                        type: "POST",
                        url: "${ctx}/security/users/repeat",
                        data: {
                            account: function () {
                                return $("#account").val();
                            },
                            id: ${users.id == null ? 0:users.id}
                        }
                    }
                },
                name: "required",
                password: {
                    required: true,
                    minlength: 6
                },
                "roles.id": "required"
            },
            messages: {
                account: {
                    remote: $.format("用户名已存在，请重新输入！")
                }
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                var parent = element.parent();
                if(parent.is("label"))  {
                    parent = parent.parent();
                }
                error.appendTo(parent);
//                error.appendTo($("#error-contener"));
            },
            success: function (label) {
                label.addClass("valid")
            }
        });
        //密码修改
        $("#password").focus(function () {
            var value = $(this).val();
            if (value != "" && $("#password2")[0] != undefined) {
                $(this).hide();
                $("#password2").show().focus();
            }
        });
        $("#password2").blur(function () {
            var value = $(this).val();
            $(this).hide();
            $("#password").show();
            if (value != "") {
                $("#password").val(value);
            } else {
                $("#password").val($("#password").attr("oldValue"));
            }
        });
    });
</script>
<form:form id="inputForm" commandName="users" cssClass="well form-inline" action="${ctx}/security/users/save"
           method="post">
    <form:hidden path="id"/>
    <input name="oldPwd" type="hidden" value="${users.password }"/>
    <table class="table table-striped table-bordered table-condensed">
        <thead>
        <strong>
            <i class="icon-flag"></i>
            用户表单
        </strong>
        </thead>
        <tr>
            <td class="span2">账号:</td>
            <td>
                <form:input path="account" maxlength="30"/>
                <form:errors path="account"></form:errors>
            </td>
        </tr>
        <c:if test="${users.password != null }">
            <tr>
                <td>密码:</td>
                <td>
                    <input id="password2" class="hide" name="password2" type="text" value="" size="30" maxlength="80"/>
                    <input name="password" id="password" type="password" value="${users.password }"
                           oldValue="${users.password }" maxlength="80"/>
                    <form:errors path="password"></form:errors>
                </td>
            </tr>
        </c:if>
        <c:if test="${users.password == null }">
            <tr>
                <td>密码:</td>
                <td>
                    <form:password path="password" maxlength="80"/>
                </td>
            </tr>
        </c:if>
        <tr>
            <td>所属部门:</td>
            <td>
                <form:select path="department.id" items="${departmentList }" itemLabel="name"
                             itemValue="id"></form:select>
                <form:errors path="department"></form:errors>
            </td>
        </tr>
        <tr>
            <td>角色:</td>
            <td>
                <c:forEach items="${rolesList }" var="roles">
                    <label class="checkbox">
                        <input name="roles.id" type="checkbox"
                        <c:forEach items="${users.roles }" var="r">
                        <c:if test="${roles.id == r.id}">
                               checked="checked"
                        </c:if>
                        </c:forEach>
                               value="${roles.id}">
                            ${roles.name }
                    </label>
                </c:forEach>
            </td>
        </tr>
        <tr>
            <td>姓名:</td>
            <td>
                <input id="name" name="name" type="text" value="${users.name}" size="30" maxlength="80"/>
                <form:errors path="name">请输入用户名</form:errors>
            </td>
        </tr>
        <tr>
            <td>电话:</td>
            <td>
                <input id="phone" name="phone" type="text" value="${users.phone}" size="30" maxlength="80"/>
            </td>
        </tr>
        <tr>
            <td>邮箱E-mail:</td>
            <td>
                <input id="email" name="email" type="text" value="${users.email}" size="30" maxlength="80"/>
            </td>
        </tr>
        <tr>
            <td>禁用:</td>
            <td>
                <label class="radio">
                    <input name="enable" type="radio" <c:if test="${!users.enable}">
                        checked="checked"
                    </c:if> value="0"/>
                    是
                </label>
                <label class="radio">
                    <input name="enable" type="radio" <c:if test="${users.enable}">
                        checked="checked"
                    </c:if> value="1"/>
                    否
                </label>
            </td>
        </tr>
        <tr>
            <td>备注:</td>
            <td>
                <textarea id="memo" name="memo" rows="4" class="span6">${users.memo}</textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2" id="error-contener"></td>
        </tr>
        <tr>
            <td colspan="2" class="text-center">
                <input class="btn" type="submit" value="提交"/>
                &nbsp;
                <input class="btn" type="button" value="返回" back="back" onclick="history.go(-1)"/>
            </td>
        </tr>
    </table>
</form:form></body>
</html>